<template>
    <div id="index">
        <el-row id="head">
            <el-col id="logo" :xs="4" :sm="4" :md="4" :lg="4" :xl="3" class="hidden-md-and-down">
                {{logo_text === undefined ? 'LOGO' : logo_text}}
            </el-col>
            <el-col id="menu" :xs="24" :sm="24" :md="24" :lg="17" :xl="19">
                <el-menu :default-active="active_menu" mode="horizontal"
                         background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
                         class="menu" @select="setActiveMenu">
                    <el-menu-item index="/home">
                        个人中心
                    </el-menu-item>
                    <el-menu-item v-for="(item,index) in opened_menu" :key="index" :index="item.url">
                        {{item.name}}
                        <i class="el-icon-close menu_close_flag" v-show="active_menu === item.url"
                           @click.stop="delOpenedMenu(index)"/>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col id="user" :xs="3" :sm="3" :md="3" :lg="3" :xl="2" class="hidden-md-and-down">
                <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                        {{user_info.department + '：' + user_info.fullname}}
                        <i class="el-icon-arrow-down el-icon--right"/>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <div @click="repwd_dialog.status = true">修改密码</div>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <div @click="logout">退出系统</div>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
        <el-row id="body">
            <el-col id="side" :xs="4" :sm="4" :md="4" :lg="4" :xl="3" class="hidden-md-and-down">
                <div ref="side_area">
                    <div>
                        <el-menu :default-active="active_menu" unique-opened
                                 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
                                 @select="setActiveMenu">
                            <MenuTree :menu_data="system_menu"/>
                        </el-menu>
                    </div>
                </div>
            </el-col>
            <el-col id="main" :xs="24" :sm="24" :md="24" :lg="20" :xl="21">
                <div>
                    <div id="main-area">
                        <router-view/>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="repwd_dialog.status" :title="repwd_dialog.title" width="30%">
            <el-form ref="repwd_form" :model="repwd_dialog.formData" :rules="repwd_dialog.formRule"
                     label-width="80px">
                <el-form-item label="原密码：" prop="oldpwd">
                    <el-input v-model="repwd_dialog.formData.oldpwd" show-password/>
                </el-form-item>
                <el-form-item label="新密码：" prop="newpwd">
                    <el-input v-model="repwd_dialog.formData.newpwd" show-password/>
                </el-form-item>
                <el-form-item label="请确认：" prop="verpwd">
                    <el-input v-model="repwd_dialog.formData.verpwd" show-password/>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="repwd_dialog.status = false">取消</el-button>
                <el-button @click="repwd_dialog_submit('repwd_form')">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import MenuTree from '@/views/Menu';
    import {rsa_encrypt} from "@/plugins/helper";

    export default {
        name: "Index",
        computed: {
            user_info() {
                return this.$store.state.user_info;
            },
            logo_text() {
                return this.$store.state.logo_text;
            },
            active_menu() {
                return this.$store.state.active_menu;
            },
            system_menu() {
                return this.$store.state.system_menu;
            },
            opened_menu() {
                return this.$store.state.opened_menu;
            },

        },
        components: {
            MenuTree
        },
        data() {
            return {
                repwd_dialog: {
                    title: '重置密码',
                    status: false,
                    formData: {},
                    formRule: {
                        oldpwd: [
                            {required: true, message: '请输入原密码！', trigger: 'blur'}
                        ],
                        newpwd: [
                            {required: true, message: '请输入新密码！', trigger: 'blur'},
                            {min: 6, message: '密码最少六位', trigger: 'blur'}
                        ],
                        verpwd: [
                            {required: true, message: '请确认新密码！', trigger: 'blur'},
                            {
                                validator: (rule, value, callback) => {
                                    let newpwd = this.repwd_dialog.formData.newpwd;
                                    if (value !== newpwd) {
                                        callback(new Error('两次输入密码不一致'));
                                    } else {
                                        callback()
                                    }
                                }
                            }
                        ]
                    }
                }
            }
        },
        methods: {
            setActiveMenu(indexPath) {
                this.$store.commit('setActiveMenu', indexPath);
                // 保存菜单状态
                window.sessionStorage.setItem('omenu', JSON.stringify(this.$store.state.opened_menu));
                window.sessionStorage.setItem('amenu', this.$store.state.active_menu);
            },
            delOpenedMenu(index) {
                this.$store.commit('delOpenedMenu', index);
                // 保存菜单状态
                window.sessionStorage.setItem('omenu', JSON.stringify(this.$store.state.opened_menu));
                window.sessionStorage.setItem('amenu', this.$store.state.active_menu);
            },
            repwd_dialog_submit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.axios.get('/login', {params: {scope: 'getkey'}})
                            .then(res => {
                                if (res.data.code === '0x00010') {
                                    let encrypt_data = rsa_encrypt(JSON.stringify(this.repwd_dialog.formData), res.data.data);
                                    console.log(encrypt_data)
                                    this.axios.put('/login', {enc_data: encrypt_data})
                                        .then(res => {
                                            if (res.data.code === '0x00016') {
                                                this.$message.success(res.data.msg);
                                                this.repwd_dialog.status = false;
                                            } else {
                                                this.$message.error(res.data.msg)
                                            }
                                        })
                                        .catch(err => {
                                            this.$message.error('系统错误：' + err);
                                        })

                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            })
                            .catch(err => {
                                this.$message.error('系统错误：' + err);
                            })
                    }
                })
            },
            logout() {
                //退出系统
                this.axios.delete('/login')
                    .then(res => {
                        if (res.data.code === '0x00007') {
                            this.$message.success(res.data.msg);
                            this.$router.push('/login');
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    })
                    .catch(err => {
                        this.$message.error('系统错误：' + err);
                    })
            }
        },
        watch: {
            active_menu: function (val) {
                if (this.$route.path !== val)
                    this.$router.push(val);
            }
        },
        created() {
            this.$store.dispatch('getSystemMenu');
            // 恢复菜单状态
            let omenu = JSON.parse(window.sessionStorage.getItem('omenu'));
            let amenu = window.sessionStorage.getItem('amenu');
            if (omenu.length > 0)
                this.$store.commit('setOpenedMenu', omenu);
            this.$store.commit('setActiveMenu', amenu);
        },
        mounted() {
            this.$nextTick(function () {
                let _this = this;
                // 获取正文区域高度
                let main_area = document.getElementById('main-area');
                _this.$store.commit('setFixedHeight', main_area.clientHeight);

                document.body.onresize = function () {
                    let main_area = document.getElementById('main-area');
                    _this.$store.commit('setFixedHeight', main_area.clientHeight);
                };
            });
        },
    }
</script>

<style scoped lang="stylus">
    #index {
        width 100%
        height 100vh
    }

    $head_height = 55px
    $body_height = 'calc(100vh - %s)' % 55px
    #head {
        height $head_height

        #logo {
            height $head_height
            background-color #2c3e50
            text-align center
            font-size 2em
            line-height 55px
            color white
        }

        #menu {
            height $head_height

            .menu {
                height $head_height
                border-bottom none

                li {
                    height $head_height
                    line-height $head_height
                }

                .menu_close_flag:hover {
                    color white
                }
            }
        }

        #user {
            height $head_height
            background-color #2c3e50
            padding 8px
            text-align center
            line-height 39px

            .el-dropdown-link {
                cursor pointer
                color #2d8cf0
            }
        }
    }

    #body {
        height $body_height

        #side {
            height $body_height

            > div {
                height 100%
                width 100%
                overflow hidden

                > div {
                    height 100%
                    width 'calc(100% + %s)' % 17px
                    overflow-y scroll
                }
            }

            ul {
                border-right none
                height 100%
            }
        }

        #main {
            height $body_height
            background-color #bcbcbc
            padding 8px

            > div {
                height 100%
                width 100%
                overflow hidden
                background-color #2d8cf0

                > div {
                    height 100%
                    width 'calc(100% + %s)' % 17px
                    overflow-y scroll
                }
            }
        }
    }
</style>